<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>1、核心：数据驱动，组件系统</p>
        <p>2、区别：使用v-show 只是简单的改变元素的css属性 display，
        而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁），
        v-show不能在template元素上使用
        适用场景：v-if不适合频繁切换，v-show适合频繁切换 v-if适用登录页面 v-show适用选项卡</p>
        <p>3、事件修饰符：.stop .prevent .capture.self .once .passive
              按键修饰符：.enter .tab .delete .esc .space .up .down .left .right
              系统修饰符：.ctrl .alt .shift .meta
              .exact 修饰符 
              鼠标修饰符：.left .right .middle
              自定义 .sync修饰符
              表单输入绑定 修饰符：.lazy .number .trim
        </p>
        <p>4、可以</p>
        <p>5、作用：如果不想复用，需要给元素添加key这个属性，且属性值唯一。</p>
        <p>6、
            <div v-for="a in 9">
                <span v-for="b in a">
                    {{b}}*{{a}}={{a*b}}
                </span>
            </div>
        </p>
    </div>
    <hr>
    <!-- 点击按钮，切换颜色 -->
    <back>
        <div slot="color">
            <button @click="changeThems('pink')">按钮1</button>
            <button @click="changeThems('#56a5f1')">按钮2</button>
            <button @click="changeThems('rgb(200,200,200)')">按钮3</button>
        </div>
    </back>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: function() {
                return {
                   bgc: 'pink'
                }
            },
            comments: {
                back: {
                    template: 
                    `
                      <div>
                        <slot name="color"></slot>
                      </div>
                    `,
                    data() {
                        return {
                            bgc: 'pink'
                        }
                    },
                }
            },
            methods: {
                changeThems(color){
                    this.bgc=color
                    this.$emit('cyz',this.bgc)
                }
            },
            methods: {
                cyzHandler(val,data){
                    console.log(val)
                }
            },
        })
    </script>
</body>
</html>